<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="采购日期" prop="采购日期">
              <el-date-picker type="daterange" v-model="queryParams.采购日期" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="采购单号" prop="采购单号">
              <el-input
                v-model="queryParams.采购单号"
                placeholder="请输入采购单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="供应商" prop="供应商">
              <el-input
                v-model="queryParams.供应商"
                placeholder="请输入供应商"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购业务员" prop="采购业务员">
                <el-select v-model="queryParams.warehouse" placeholder="请选择采购业务员" @change="handleQuery">
                    <el-option label="业务员A" value="业务员A"></el-option>
                    <el-option label="业务员B" value="业务员B"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运输方式" prop="运输方式">
                <el-select v-model="queryParams.warehouse" placeholder="请选择运输方式" @change="handleQuery">
                    <el-option label="方式1" value="方式1"></el-option>
                    <el-option label="方式2" value="方式2"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

      <el-tooltip placement="top">
      <div slot="content">点击任意一行列，即可在下方查看订单明细记录</div>
      <el-table :data="orderdata" :row-class-name="rowClassName" v-loading="loading" @row-click="showTab">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="订单日期" prop="requestDate"></el-table-column>
        <el-table-column label="供应商" prop="supplier"></el-table-column>
        <el-table-column label="采购业务员" prop="requestman"></el-table-column>
        <el-table-column label="运输方式" prop="requestType"></el-table-column>
        <el-table-column label="采购订单号" prop="RequestorderNo"></el-table-column>
        <el-table-column label="对应生产任务单号" prop="production"></el-table-column> 
        <el-table-column label="对应销售单号" prop="salesnumber"></el-table-column> 
        <el-table-column label="对应合同号" prop="contractnumber"></el-table-column>  
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tooltip>
    <el-dialog title="新增" :visible.sync="open" width="1000px" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单日期" prop="订单日期">
              <el-input v-model="form.requestDate" placeholder="请输入订单日期"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="供应商">
              <el-select v-model="form.supplier" placeholder="请选择供应商">
                <el-option value="供应商A" label="供应商A" />
                <el-option value="供应商B" label="供应商B" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购业务员" prop="采购业务员">
              <el-select v-model="form.requestman" placeholder="请选择采购业务员">
                <el-option value="业务员A" label="业务员A" />
                <el-option value="业务员B" label="业务员B" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运输方式" prop="运输方式">
              <el-select v-model="form.requestType" placeholder="请选择运输方式">
                <el-option value="运输方式A" label="运输方式A" />
                <el-option value="运输方式B" label="运输方式B" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购订单号" prop="采购订单号">
              <el-input v-model="form.requestorderNo" placeholder="请输入采购订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应生产单号" prop="对应生产单号">
              <el-input v-model="form.production" placeholder="请输入对应生产单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="对应销售单号" prop="对应销售单号">
              <el-input v-model="form.salesnumber" placeholder="请输入对应销售单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应合同号" prop="对应合同号">
              <el-input v-model="form.requestorderNo" placeholder="请输入采购订单号"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
            <el-divider>订单信息明细</el-divider>

            <el-tabs v-model="activeName" v-if="showCard" >
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
                <el-table-column prop="platenumber" label="版号" align="center" />
                <el-table-column prop="quantity" label="需求数量" align="center" />
                <el-table-column prop="proportion" label="比例" align="center" />
                <el-table-column prop="actual" label="实际下单数" align="center" />
                <el-table-column prop="date" label="交货日期" align="center" />
                <el-table-column prop="remark" label="备注" align="center" />
                <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
                    <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          </el-tabs> 
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
    </el-dialog>

     <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
      
      <el-tabs v-model="activeName" v-if="showCard" >
            <h2 align="center">{{ detail_supplier }}订单明细</h2>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
                <el-table-column prop="platenumber" label="版号" align="center" />
                <el-table-column prop="quantity" label="需求数量" align="center" />
                <el-table-column prop="proportion" label="比例" align="center" />
                <el-table-column prop="actual" label="实际下单数" align="center" />
                <el-table-column prop="date" label="交货日期" align="center" />
                <el-table-column prop="remark" label="备注" align="center" />
                <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
                    <template slot-scope="scope">
                         <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm(scope.row)">修改</el-button>
                         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          </el-tabs> 
        </el-col>        
      </el-row>
      <el-dialog :title="titleComm" :visible.sync="openComm" width="800px" append-to-body>
       <el-form :model="formComm" :rules="rulesComm" ref="formComm" >
        <el-row>
            <el-col :span="12">
                <el-form-item label="版号" prop="platenumber">
                    <el-input v-model="formComm.platenumber" placeholder="请输入版号" style="width: 240px;" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="需求数量" prop="quantity">
                    <el-input v-model="formComm.quantity" placeholder="请输入需求数量" style="width: 240px;" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="比例" prop="proportion">
                    <el-input v-model="formComm.proportion" placeholder="请输入比例" style="width: 240px;" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="实际下单数" prop="actual">
                    <el-input v-model="formComm.actual" placeholder="请输入实际下单数" style="width: 240px;" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="交货日期" prop="date">
                    <el-input v-model="formComm.date" placeholder="请输入交货日期" style="width: 240px;" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="formComm.remark" placeholder="请输入备注" style="width: 240px;" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormComm">确 定</el-button>
          <el-button @click="cancelComm">取 消</el-button>
      </div>
     </el-dialog>
    </div>
</template>


  
   <script>
   export default{
    data() {
      return {
        title:null,
         titleComm:null,
        total:0,
        open:false,
        openComm:false,
        form:{},
        formComm:{},
        rules:{},
        rulesComm:{},
        orderNo: '',
        textarea: '',
        input1: '',
        input2: '',
        input3: '',
        orderNo: '',
        detail_supplier:'',
      showCard: true,
      activeName: 'first',
      orderdata: [{
        requestDate: '2021-01-01',
        supplier: 'a1',
        requestman: '业务员A',
        requestType: '航空运输',
        RequestorderNo: 'QGD1811191879',
        production: '',
        salesnumber: '',
        requestorderNo: ''    
      }, {
        requestDate: '2024-10-16',
        supplier: 'a2',
        requestman: '何月洪',
        requestType: '铁路运输',
        RequestorderNo: 'QGD2411190001',
        production: '',
        salesnumber: '',
        }, {
        requestDate: '2024-12-16',
        supplier: 'a3',
        requestman: '业务员B',
        requestType: '海运',
        RequestorderNo: 'QGD2411190002',
        production: '',
        salesnumber: '',
        }],

        loading: false,
        dialogVisible: false,
        editForm: {
       }, 

        detailedData: [{
            platenumber: '1',
            quantity :'100',
            proportion :'1:100',
            actual :'120',
            date :'2019/12/06',
            remark: '无'
        }, {
            platenumber: '2',
            quantity :'200',
            proportion :'1:200',
            actual :'150',
            date :'2024/11/24',
            remark: ''
        },{
            platenumber: '3',
            quantity :'330',
            proportion :'1:10',
            actual :'300',
            date :'2025/01/01',
            remark: ''
        }],

        defaultProps: {
            children: 'children',
            label: 'label'
        },

        total: 0,
      loading: false,
      radio: 3,
        queryParams:{
          date1: '',
        date2: '',
        radio: 3,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData:[],
        RequestorderNo: '',
      }
    },
    methods: {
      
      rowClassName({ row }) {
      return row.RequestorderNo == this.RequestorderNo ? 'selected-row' : ''; // 判断是否选中
    },
     
    handleEdit(row) {
      this.currentEditRow = { ...row }; 
      this.open= true; 
      this.dialogVisible = true;
    },
    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(data){
          console.log(data);
        },
        handleAdd() {
          this.title = '新增'
          this.open = true;
          this.isEdit = false;
        },
          handleUpdate(row) {
          this.title = '编辑订单'
          this.open = true;
          this.isEdit = false;
          this.form = row;
        },
         handleAddComm(){
           this.titleComm = '新增订单明细'
           this.openComm = true;
         },
         handleUpdateComm(row){
            this.titleComm = '编辑订单明细'
            this.openComm = true;
            this.formComm = row;
          },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
    showTab(row) {
      this.RequestorderNo = row.RequestorderNo;
      this.showCard = true,
      this.detail_supplier=row.supplier
    },

        handleDelete(){},
        handleExport(){},
        handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
    },
    
   }
   </script>

<style>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
